﻿@import '../../../Geral/_mixins.scss';
@import '../../../Geral/_styles.scss';
@import '../../../Geral/_variaveis.scss';

#sectionProdutos {
	@include float(2000px, 96%);
	margin: 0 2%;

	#navCategoriasLoja {
		@include float(100%, 20%);

		ul {
			@include marginpadding();
			list-style: none;

			li {
				display: block;
				margin: 10px 20px;
			}
		}
	}

	#articleProdutos {
		@include float(100%, calc(78% - 8px), 0, 2%);

		header {
			@include float(70px, 98%);
			padding: 0 1%;
			background: grey;
			font-size: 26px;

			ul {
				@include marginpadding();
				list-style: none;
				line-height: 70px;

				li {
					display: inline;
					padding: 0 10px;
				}
			}
		}

		#articleProds {
			@include float(1000px, 100%, 30px, 0, true);

			.articleRecomendado {
				@include float(auto, 300px, 40px, 60px);
				border-bottom: 2px solid $vermelho;
				text-align: center;

				.divImagemProduto {
					@include float(350px, 100%);
					overflow: hidden;

					img {
						height: 350px;
						max-width: 300px;
					}

					.divDesconto {
						position: relative;
						top: -372px;
						left: -50px;
						height: 350px;
						width: 200px;
						background: url('../../Imagens/Icones/desconto.png') no-repeat left;
						background-size: contain;

						.valorDesconto {
							width: 140px;
							padding: 10px 0;
							padding-right: 10px;
							color: pink;
							font-weight: bold;
							text-align: right;
							background: $vermelho;
						}
					}
				}

				.divNomeProduto {
					@include float(150px, 100%);
					font-size: 30px;
					overflow: hidden;
				}

				.divPrecoProduto {
					@include float(50px, 98%);
					padding: 1%;
				}

				&:hover {
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					border-bottom: 2px solid darken($vermelho, 20%);
					cursor: pointer;

					& > .divPrecoProduto {
						font-weight: normal;
					}
				}
			}
		}
	}
}
